<template>
	<view class="container">
		<view class="banner">
			<ImageLoad :src="detailData.coverUrl" borderRadius="30" />
			<view class="fonts">{{ detailData.title }}</view>
		</view>
		<video class="video" v-if="detailData.video" :src="detailData.video.url" :style="{ height: 670 / (detailData.video.width / detailData.video.height) + 'rpx' }"></video>
		<view v-if="detailData.contentType !== 'dom'">
			<view v-for="(item, index) in detailData.items" :key="index">
				<view v-if="item.type === 'text'" :style="item.style" class="text">{{ item.value }}</view>
				<view v-if="item.type === 'image'" :style="{ height: 670 / item.sizeRatio + 'rpx' }" class="image"><ImageLoad :src="item.value" mode="widthFix" /></view>
			</view>
		</view>
		<jyf-parser
			class="rich"
			@ready="ready"
			:lazy-load="true"
			:tagStyle="tagStyle"
			:show-with-animation="true"
			v-if="detailData.contentType === 'dom'"
			:html="detailData.dom"
		></jyf-parser>
	</view>
</template>

<script>
import ImageLoad from '../../components/imageLoad/imageLoad.vue'
import jyfParser from '@/components/jyf-parser/jyf-parser'
export default {
	props: ['detailData', 'index'],
	components: { ImageLoad, jyfParser },
	data() {
		return {
			tagStyle: {
				img: 'max-width:100%;height:auto;margin:0 auto;border-radius:10px;overflow:hidden;box-shadow:0 0 25px #dcdfe6;transform:translate3d(0,0,0)'
			}
		}
	},
	mounted() {
		if (this.detailData.contentType !== 'dom') this.ready()
	},
	methods: {
		ready: function() {
			const query = uni.createSelectorQuery().in(this)
			query
				.select('.container')
				.boundingClientRect(data => {
					this.$emit('htmlReady', this.index, data)
				})
				.exec()
		}
	}
}
</script>

<style scoped lang="stylus">
.container
	width 100%
	height auto
	min-height 550rpx
	background white
	display flex
	flex-direction column
	padding-bottom 40rpx
	.banner
		width 100%
		height 550rpx
		position relative
		border-radius 0 0 40rpx 40rpx
		overflow hidden
		transform translate3d(0, 0, 0)
		margin-bottom 30rpx
		view
			color white
			font-size 40rpx
			line-height 45rpx
			height 120rpx
			width 100%
			position absolute
			left 0
			bottom 0
			padding 20rpx 0 0 20rpx
			box-sizing border-box
			background linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
	.video
		width 90%
		max-height 600rpx
		margin 5rpx 5%
		border-radius 30rpx
	.text
		width 90%
		font-size 30rpx
		margin 5rpx 5%
	.image
		width 90%
		// height auto
		margin 20rpx auto
		position relative
		overflow hidden
		border-radius 30rpx
		transform translate3d(0, 0, 0)
		box-shadow 0 0 50rpx #dcdfe6

	.rich
		width 100%
		margin 5rpx 0
		padding 0 5%
		box-sizing border-box
		word-break break-all
</style>
